<template>
  <div>
    <div class="topSearchNine">
      <div class="topSearchNineLeft">
        <div>
          <p>订单号:</p>
          <el-input
            :style="{ width: '200px', marginLeft: '20px' }"
            v-model="orderCode"
            placeholder="订单号"
            clearable
          ></el-input>
        </div>
        <div>
          <p>商品名称:</p>
          <el-input
            :style="{ width: '200px', marginLeft: '20px' }"
            v-model="goodsName"
            placeholder="请输入要查询的商品名称"
            clearable
          ></el-input>
        </div>
        <div>
          <p>商品评分排序:</p>
          <el-select
            v-model="sortBy"
            placeholder="商品评分排序"
            filterable
            clearable
            @clear="ClearAttributes"
            :style="{ width: '200px', marginLeft: '10px' }"
          >
            <el-option
              v-for="(item, index) in AttributesSelect"
              :key="index"
              :label="item.name"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </div>
      <div class="topSearchNineRight">
        <el-button
          type="primary"
          :style="{ marginLeft: '20px' }"
          @click="searchOrder"
        >
          查询
        </el-button>
        <el-button :style="{ marginLeft: '20px' }" @click="clearAll">
          重置
        </el-button>
      </div>
    </div>
    <div class="ordershipped">
      <div class="SecondRow">
        <div class="SecondRowLeft">
          <!-- <el-button
            :disabled="isButtonDisabled"
            size="medium"
            @click="clearAll"
          >
            清空
          </el-button> -->
        </div>
        <div class="SecondRowRight">
          <el-button type="primary" plain> 导出 </el-button>
          <el-button circle icon="el-icon-refresh-right" @click="searchOrder">
          </el-button>
        </div>
      </div>
      <div class="DataTableDiv">
        <el-table
          v-loading="searchOrderloading"
          :header-cell-style="{ 'text-align': 'center' }"
          :cell-style="{ 'text-align': 'center' }"
          :data="SelloutData"
          border
          style="width: 100%"
          empty-text="暂无数据"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" min-width="65"> </el-table-column>
          <el-table-column fixed label="排序" prop="sort" min-width="80">
            <template slot-scope="scope">
              <div class="flex-container">
                <span class="flex-item">
                  <!-- 序号 -->
                  {{ scope.$index + 1 }}
                </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="orderCode" label="订单号" min-width="150">
          </el-table-column>
          <el-table-column
            prop="goodsInfo.goodsName"
            label="商品名称"
            min-width="230"
          >
          </el-table-column>
          <el-table-column prop="nickName" label="买家名称" min-width="280">
          </el-table-column>
          <el-table-column prop="star" label="商品评分" min-width="210">
          </el-table-column>

          <el-table-column label="评价状态" min-width="110">
            <template slot-scope="prop">
              <el-switch
                v-model="prop.row.deleted"
                :active-value="0"
                :inactive-value="1"
                active-color="#13ce66"
                inactive-color="#ff4949"
                @change="handleSwitchChange($event, prop.row, prop.$index)"
              >
              </el-switch>
            </template>
          </el-table-column>

          <el-table-column label="操作" min-width="215">
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.replyOpinion == null"
                @click="handleClick(scope.row, 'reply')"
                type="text"
                size="small"
                >回复</el-button
              >
              <el-button
                v-else
                @click="handleClick(scope.row, 'view')"
                type="text"
                size="small"
                >查看</el-button
              >
            </template>
          </el-table-column>
          <!-- <div slot="empty">暂无数据</div> -->
        </el-table>
      </div>
      <div class="paging" v-if="total > 0">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <div>
      <el-dialog
        :title="action == 'view' ? '查看' : '回复'"
        :visible.sync="orderDetailes"
        width="40%"
        :close-on-click-modal="false"
        destroy-on-close
      >
        <el-form
          ref="deliveForm"
          :rules="rules"
          :model="deliveForm"
          :inline="true"
          label-width="auto"
        >
          <el-form-item label="商品名称:">
            <el-input
              disabled
              :style="{ width: '480px', marginLeft: '20px' }"
              v-model="deliveForm.goodsInfo.goodsName || '无'"
              type="text"
            ></el-input>
          </el-form-item>
          <el-form-item label="商品规格:">
            <el-input
              disabled
              :style="{ width: '480px', marginLeft: '20px' }"
              v-model="deliveForm.goodsInfo.specAttr"
              type="text"
            ></el-input>
          </el-form-item>
          <el-form-item label="买家名称:">
            <el-input
              disabled
              :style="{ width: '480px', marginLeft: '20px' }"
              v-model="deliveForm.nickName"
              type="text"
            ></el-input>
          </el-form-item>
          <el-form-item label="买家评价分数:">
            <el-input
              disabled
              :style="{ width: '480px', marginLeft: '20px' }"
              v-model="deliveForm.star"
              type="text"
            ></el-input>
          </el-form-item>
          <el-form-item label="买家评价时间:">
            <el-input
              disabled
              :style="{ width: '480px', marginLeft: '20px' }"
              v-model="deliveForm.createAt"
              type="text"
            ></el-input>
          </el-form-item>
          <el-form-item label="买家评价信息:">
            <el-input
              disabled
              :style="{ width: '480px', marginLeft: '20px' }"
              v-model="deliveForm.eva"
              type="text"
            ></el-input>
          </el-form-item>
          <el-form-item label="买家评价图片:">
            <img :src="deliveForm.imgs" alt="" />
          </el-form-item>
          <!-- <el-form-item label="买家追评信息:" label-width="100px">
            <el-input
              disabled
              :style="{ width: '480px', marginLeft: '20px' }"
              v-model="deliveForm.expressCode"
              type="text"
            ></el-input>
          </el-form-item> -->
          <!-- <el-form-item label="买家追评图片:" label-width="100px">
            <el-col :span="18">
              <div>{{ SelloutData.eva }}</div></el-col
            >
          </el-form-item> -->
          <el-form-item label="卖家店铺:">
            <el-input
              disabled
              :style="{ width: '480px', marginLeft: '20px' }"
              v-model="deliveForm.mallName"
              type="text"
            ></el-input>
          </el-form-item>
          <el-form-item label="回复评论:" prop="replyOpinion">
            <el-input
              :disabled="action == 'view'"
              :style="{ width: '480px', marginLeft: '20px' }"
              v-model="deliveForm.replyOpinion"
              type="textarea"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer" v-if="action == 'reply'">
          <el-button @click="orderDetailes = false">取 消</el-button>
          <el-button type="primary" @click="submitForm('deliveForm')"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import {
  tModOrderEvaPageForSeller,
  tModOrderEvaDelete,
  tModOrderEvaDetail,
  tModOrderEvaReplay,
} from "@/api/mallApi/congLinMall";
export default {
  name: "OrderEvaManagement",
  created() {
    this.tModOrderEvaPageForSeller();
    // this.tModOrderEvaDetail();
  },
  data() {
    return {
      action: "",
      rules: {
        replyOpinion: [
          { required: true, message: "请输入评论", trigger: "blur" },
          {
            min: 3,
            max: 300,
            message: "长度在 3 到 300 个字符",
            trigger: "blur",
          },
        ],
      },
      value: true,
      orderDetailes: false,
      form: {},
      deliveForm: {
        goodsInfo: {},
      },
      orderCode: "", //订单号
      goodsName: "", //商品名称
      sortBy: null, //订单状态
      searchOrderloading: false,
      //添加/修改 商品弹窗
      centerDialogVisible: false,
      currentRow: {}, // 保存当前行数据
      AttributesSelect: [
        { name: "评分升序", value: "asc" },
        { name: "评分降序", value: "desc" },
      ],
      SelloutData: [],
      selectedRows: [], //表格 多选内容
      isButtonDisabled: false, //checkbox 联动按钮
      currentPage: 1, //分页
      pageSize: 10, //,每页显示条数
      total: 0,
      detailOrder: {},
    };
  },
  methods: {
    submitForm(formName) {
      console.log("fromName", this.deliveForm);
      let values = {
        id: this.deliveForm.id,
        replyOpinion: this.deliveForm.replyOpinion,
      };
      console.log(values);
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert("submit!");
          tModOrderEvaReplay(values).then((res) => {
            if (res.success) {
              this.$message.success("评论成功");
            }
          });
          this.$refs[formName].resetFields();
          this.orderDetailes = false;
          this.tModOrderEvaPageForSeller();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleSwitchChange(e, row, index) {
      console.log("e", e, "row", row, "index", index); //e返回状态，row当前行数据，index下标
      let params = {
        ids: [row.id],
        deleted: e ? 1 : 0,
      };
      console.log(params);
      tModOrderEvaDelete(params).then((res) => {
        if (res.success) {
          this.$message.success("操作成功");
        }
      });
    },
    //订单详情
    // tModOrderEvaDetail(aaa) {
    //   tModOrderEvaDetail(aaa)
    //     .then((res) => {
    //       this.searchOrderloading = false;
    //       console.log("订单详情", res);
    //       this.deliveForm = res.data;
    //     })
    //     .catch(() => {
    //       this.searchOrderloading = false;
    //     });
    // },
    tModOrderEvaPageForSeller() {
      this.searchOrderloading = true;
      let reqData = {
        // type: 2,
        // isPage: 1,
        pageNo: this.currentPage,
        pageSize: this.pageSize,
        orderCode: this.orderCode, // 订单号
        goodsName: this.goodsName, //买家账号
        sortBy: this.sortBy, // 评分排序
      };
      tModOrderEvaPageForSeller(reqData)
        .then((res) => {
          this.searchOrderloading = false;
          console.log("所有订单", res);
          this.SelloutData = res.data.rows;
          this.total = Number(res.data.totalRows);
        })
        .catch(() => {
          this.searchOrderloading = false;
        });
    },
    searchOrder() {
      this.tModOrderEvaPageForSeller();
    },
    clearAll() {
      this.orderCode = "";
      this.goodsName = "";
      this.sortBy = "";
      this.tModOrderEvaPageForSeller();
    },
    ClearAttributes() {
      console.log("商品属性 事件清空");
    }, //清空 商品属性
    ClearCategory() {
      console.log("商品分类 事件清空");
    },
    //分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.tModOrderEvaPageForSeller();
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.tModOrderEvaPageForSeller();
    },
    handleSelectionChange(selection) {
      this.selectedRows = selection;
      console.log("选中的行数据：", this.selectedRows);
      // 在这里进行相应的操作，如发起请求等
    }, //表格多选
    async handleClick(row, action) {
      let aaa = {
        id: row.id,
      };
      let res = await tModOrderEvaDetail(aaa);
      this.deliveForm = res.data;
      // this.deliveForm = res.data
      // tModOrderEvaDetail(aaa)
      //   .then((res) => {
      //     this.searchOrderloading = false;
      //     this.deliveForm = res.data;
      //   })
      //   .catch(() => {
      //     this.searchOrderloading = false;
      //   });
      console.log(this.deliveForm);
      // 点击编辑按钮时触发
      // this.deliveForm = row; // 将当前行数据保存起来
      console.log("row", row);
      this.action = action;

      this.orderDetailes = true; // 打开弹窗
    },
  },
};
</script>

<style scoped lang="scss">
.topSearchNine {
  width: 98%;
  margin: 1%;
  background-color: #fff;
  min-height: 75px;
  display: flex;
  justify-content: space-between;
  .topSearchNineLeft {
    width: 1150px;
    display: flex;
    margin-left: 10px;

    > div {
      display: flex;
      align-items: center;
      p {
        font-size: 14px;
      }
      margin-left: 10px;
    }
  }
  .topSearchNineRight {
    width: 200px;
    display: flex;
    align-items: center;
  }
}
.ordershipped {
  // display: flex;
  // flex-direction: column;
  // align-content: center;
  // justify-content: center;
  width: 98%;
  min-height: 750px;
  margin-top: 1%;
  margin-bottom: 1%;
  margin-left: 1%;
  background-color: #fff;
  overflow: hidden;
  .SecondRow {
    width: 100%;
    min-height: 65px;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    .SecondRowLeft {
      margin-top: 10px;
      margin-left: 25px;
    }
    .SecondRowRight {
      margin-top: 10px;
      margin-right: 30px;
    }
  }
  .DataTableDiv {
    width: 98%;
    margin-left: 1%;
    margin-bottom: 15px;
    // border: 1px solid #dcdee2;
    // > div:nth-child(1) {
    //   padding: 10px;
    // }
    //表格
    .flex-container {
      display: flex;
      align-items: center; /* 垂直居中 */
      justify-content: space-around;
      > img {
        width: 70px;
        height: 70px;
      }
    }
    // .TableAttrTem {
    //   display: flex;
    //   align-items: center;
    //   justify-content: space-around;
    // }
  }
  .paging {
    width: 99%;
    height: 50px;
    // background-color: antiquewhite;
    display: flex;
    align-items: end;
    justify-content: end;
  }
}
</style>
